<template>
  <div class="function-case-container">
    <div class="header-container">
      <h2>功能用例</h2>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-section">
      <div class="search-bar-container">
        <div class="search-wrapper">
          <search-bar @search="handleSearch" />
        </div>
        <el-button type="primary" @click="addNewCase">添加用例</el-button>
      </div>
    </div>
    
    <!-- 功能用例表格 -->
    <el-table 
      :data="filteredTableData" 
      style="width: 100%; background-color: transparent !important;"
      v-loading="loading"
      :border="false"
      :show-header="true"
      :cell-style="{backgroundColor: 'transparent', border: 'none'}"
      :header-cell-style="{backgroundColor: 'transparent', border: 'none'}"
      class="transparent-table"
    >
      <!-- ID列 -->
      <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
      
      <!-- 项目名称列 -->
      <el-table-column prop="project_name" label="项目名称" min-width="150" align="center"></el-table-column>
      
      <!-- 版本号列 -->
      <el-table-column prop="version" label="版本号" width="120" align="center"></el-table-column>
      
      <!-- 用例名称列 -->
      <el-table-column prop="case_name" label="用例名称" min-width="180" align="center">
        <template slot-scope="scope">
          <span class="clickable-text" @click="openCaseDetail(scope.row)">{{ scope.row.case_name }}</span>
        </template>
      </el-table-column>
      
      <!-- 优先级列 -->
      <el-table-column prop="priority" label="优先级" width="100" align="center">
        <template slot-scope="scope">
          <el-dropdown trigger="click" @command="(command) => handlePriorityChange(command, scope.row)" placement="bottom">
            <el-tag :type="getPriorityType(scope.row.priority)" :class="getPriorityClass(scope.row.priority)" style="cursor: pointer">
              {{ scope.row.priority }}
            </el-tag>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in priorityOptions" 
                              :key="item"
                              :command="item">
                <el-tag :type="getPriorityType(item)" 
                       :class="getPriorityClass(item)"
                       style="margin: 0; width: 100%; text-align: center;">
                  {{ item }}
                </el-tag>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      
      <!-- 创建时间列 -->
      <el-table-column prop="create_time" label="创建时间" width="180" align="center"></el-table-column>
      
      <!-- 是否通过列 -->
      <el-table-column prop="is_passed" label="是否通过" width="100" align="center">
        <template slot-scope="scope">
          <el-dropdown trigger="click" @command="(command) => handleStatusChange(command, scope.row)" placement="bottom">
            <el-tag :type="scope.row.is_passed ? 'success' : 'danger'" style="width: 60px; cursor: pointer">
              {{ scope.row.is_passed ? '通过' : '未通过' }}
            </el-tag>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="true">
                <el-tag type="success" style="width: 60px; margin: 0;">通过</el-tag>
              </el-dropdown-item>
              <el-dropdown-item command="false">
                <el-tag type="danger" style="width: 60px; margin: 0;">未通过</el-tag>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      
      <!-- 操作列 -->
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button 
            type="primary" 
            size="mini" 
            icon="el-icon-edit" 
            @click="handleEdit(scope.row)"
            circle>
          </el-button>
          <el-button 
            type="danger" 
            size="mini" 
            icon="el-icon-delete" 
            @click="handleDelete(scope.row)"
            circle>
          </el-button>
        </template>
      </el-table-column>
      <!-- 添加空状态插槽 -->
      <template slot="empty">
        <empty-state />
      </template>
    </el-table>

    <!-- 用例详情对话框 -->
    <el-dialog
      title="用例详情"
      :visible.sync="caseDetailVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="case-detail-dialog view-mode"
    >
      <el-form :model="currentCase" label-width="100px" v-if="currentCase" class="case-detail-form">
        <el-form-item label="用例名称">
          <el-input v-model="currentCase.case_name" readonly></el-input>
        </el-form-item>
        <el-form-item label="前置条件">
          <el-input type="textarea" v-model="currentCase.preconditions" readonly :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="测试步骤">
          <el-input type="textarea" v-model="currentCase.steps" readonly :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="预期结果">
          <el-input type="textarea" v-model="currentCase.expected_result" readonly :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="执行结果">
          <div class="execution-result">
            <el-dropdown trigger="click" @command="handleExecutionStatusChange" placement="bottom">
              <el-tag :type="currentCase.is_passed ? 'success' : 'danger'" style="width: 60px; cursor: pointer;">
                {{ currentCase.is_passed ? '通过' : '未通过' }}
              </el-tag>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="true">
                  <el-tag type="success" style="width: 60px; margin: 0;">通过</el-tag>
                </el-dropdown-item>
                <el-dropdown-item command="false">
                  <el-tag type="danger" style="width: 60px; margin: 0;">未通过</el-tag>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-form-item>
        <el-form-item label="执行人">
          <el-input v-model="currentCase.executor" readonly></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" @click="viewPreviousCase" :disabled="currentCaseIndex <= 0">上一条</el-button>
        <el-button type="success" @click="viewNextCase" :disabled="currentCaseIndex >= tableData.length - 1">下一条</el-button>
      </div>
    </el-dialog>

    <!-- 编辑用例对话框 -->
    <el-dialog
      title="编辑用例"
      :visible.sync="editDialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="case-detail-dialog edit-mode"
    >
      <el-form :model="editingCase" label-width="100px" v-if="editingCase" class="case-detail-form">
        <el-form-item label="项目名称">
          <el-input v-model="editingCase.project_name"></el-input>
        </el-form-item>
        <el-form-item label="版本号">
          <el-input v-model="editingCase.version"></el-input>
        </el-form-item>
        <el-form-item label="用例名称">
          <el-input v-model="editingCase.case_name"></el-input>
        </el-form-item>
        <el-form-item label="前置条件">
          <el-input type="textarea" v-model="editingCase.preconditions" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="测试步骤">
          <el-input type="textarea" v-model="editingCase.steps" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="预期结果">
          <el-input type="textarea" v-model="editingCase.expected_result" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="优先级">
          <el-dropdown trigger="click" @command="handleEditPriorityChange" placement="bottom">
            <el-tag :type="getPriorityType(editingCase.priority)" :class="getPriorityClass(editingCase.priority)" style="cursor: pointer">
              {{ editingCase.priority }}
            </el-tag>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in priorityOptions" 
                              :key="item"
                              :command="item">
                <el-tag :type="getPriorityType(item)" 
                       :class="getPriorityClass(item)"
                       style="margin: 0; width: 100%; text-align: center;">
                  {{ item }}
                </el-tag>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEdit">保存</el-button>
      </div>
    </el-dialog>

    <!-- 添加用例对话框 -->
    <el-dialog
      title="添加用例"
      :visible.sync="addDialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      class="case-detail-dialog add-mode"
    >
      <el-form :model="newCase" label-width="100px" v-if="newCase" class="case-detail-form">
        <el-form-item label="项目名称">
          <el-input v-model="newCase.project_name"></el-input>
        </el-form-item>
        <el-form-item label="版本号">
          <el-input v-model="newCase.version"></el-input>
        </el-form-item>
        <el-form-item label="用例名称">
          <el-input v-model="newCase.case_name"></el-input>
        </el-form-item>
        <el-form-item label="优先级">
          <el-dropdown trigger="click" @command="handleAddPriorityChange" placement="bottom">
            <el-tag :type="getPriorityType(newCase.priority)" :class="getPriorityClass(newCase.priority)" style="cursor: pointer; min-width: 60px;">
              {{ newCase.priority }}
            </el-tag>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in priorityOptions" 
                              :key="item"
                              :command="item">
                <el-tag :type="getPriorityType(item)" 
                       :class="getPriorityClass(item)"
                       style="margin: 0; width: 100%; text-align: center;">
                  {{ item }}
                </el-tag>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item label="前置条件">
          <el-input type="textarea" v-model="newCase.preconditions" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="测试步骤">
          <el-input type="textarea" v-model="newCase.steps" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="预期结果">
          <el-input type="textarea" v-model="newCase.expected_result" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitNewCase">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchBar from './search-bar.vue'
import EmptyState from './EmptyState.vue'

export default {
  name: 'FunctionCase',
  components: {
    SearchBar,
    EmptyState
  },
  data() {
    return {
      loading: false,
      searchQuery: '',
      priorityOptions: ['紧急', '严重', '一般', '提示', '建议'],
      passOptions: [
        { value: true, label: '通过' },
        { value: false, label: '未通过' }
      ],
      caseDetailVisible: false,
      editDialogVisible: false,
      addDialogVisible: false,
      currentCase: null,
      editingCase: null,
      newCase: null,
      currentCaseIndex: -1,
      tableData: [
        {
          id: 1,
          project_name: '测试项目A',
          version: 'v1.0.0',
          case_name: '用户登录功能测试',
          priority: '紧急',
          create_time: '2024-03-20 10:30:00',
          is_passed: true,
          preconditions: '1. 系统正常运行\n2. 数据库连接正常',
          steps: '1. 输入用户名和密码\n2. 点击登录按钮',
          expected_result: '成功登录系统，跳转到首页',
          actual_result: '登录成功，正常跳转',
          executor: '张三'
        },
        {
          id: 2,
          project_name: '测试项目B',
          version: 'v2.1.0',
          case_name: '订单支付流程测试',
          priority: '严重',
          create_time: '2024-03-19 15:45:00',
          is_passed: false
        },
        {
          id: 3,
          project_name: '测试项目A',
          version: 'v1.0.0',
          case_name: '商品搜索功能测试',
          priority: '一般',
          create_time: '2024-03-18 09:15:00',
          is_passed: true
        },
        {
          id: 4,
          project_name: '测试项目C',
          version: 'v1.5.0',
          case_name: '用户注册功能测试',
          priority: '提示',
          create_time: '2024-03-17 14:20:00',
          is_passed: true
        },
        {
          id: 5,
          project_name: '测试项目B',
          version: 'v2.1.0',
          case_name: '购物车功能测试',
          priority: '建议',
          create_time: '2024-03-16 11:30:00',
          is_passed: false
        }
      ], // 表格数据
      currentUser: '张三', // 当前登录用户，实际项目中应从用户系统获取
    }
  },
  computed: {
    filteredTableData() {
      let result = this.tableData

      // 处理第一个搜索条件
      if (this.searchQuery && this.searchQuery.type1 && this.searchQuery.query1) {
        result = result.filter(item => {
          const value = item[this.searchQuery.type1]
          if (this.searchQuery.type1 === 'is_passed') {
            const searchText = this.searchQuery.query1.toLowerCase()
            // 更灵活的匹配逻辑
            if (searchText.includes('通过')) return value === true
            if (searchText.includes('未') || searchText.includes('不')) return value === false
            return true
          }
          return value && value.toString().toLowerCase().includes(this.searchQuery.query1.toLowerCase())
        })
      }

      // 处理第二个搜索条件
      if (this.searchQuery && this.searchQuery.type2 && this.searchQuery.query2) {
        result = result.filter(item => {
          const value = item[this.searchQuery.type2]
          if (this.searchQuery.type2 === 'is_passed') {
            const searchText = this.searchQuery.query2.toLowerCase()
            // 更灵活的匹配逻辑
            if (searchText.includes('通过')) return value === true
            if (searchText.includes('未') || searchText.includes('不')) return value === false
            return true
          }
          return value && value.toString().toLowerCase().includes(this.searchQuery.query2.toLowerCase())
        })
      }

      return result
    }
  },
  methods: {
    // 获取优先级标签类型
    getPriorityType(priority) {
      const typeMap = {
        '紧急': '',  // 自定义红色
        '严重': 'danger',
        '一般': 'success',
        '提示': 'info',
        '建议': ''  // 白色
      }
      return typeMap[priority] || ''
    },
    // 获取优先级自定义类名
    getPriorityClass(priority) {
      const classMap = {
        '紧急': 'priority-urgent',
        '建议': 'priority-suggestion'
      }
      return classMap[priority] || ''
    },
    // 处理编辑
    handleEdit(row) {
      this.editingCase = { ...row }
      this.editDialogVisible = true
    },
    // 处理删除
    handleDelete(row) {
      this.$confirm('确认删除该功能用例吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('删除:', row)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 处理搜索
    handleSearch(query) {
      this.searchQuery = query
    },
    // 处理状态变更
    handleStatusChange(command, row) {
      row.is_passed = command === 'true'
    },
    // 处理优先级变更
    handlePriorityChange(command, row) {
      row.priority = command
    },
    // 打开用例详情
    openCaseDetail(row) {
      this.currentCase = { 
        ...row,
        executor: row.executor || this.currentUser // 如果没有执行人，默认为当前用户
      }
      this.currentCaseIndex = this.tableData.findIndex(item => item.id === row.id)
      this.caseDetailVisible = true
    },
    // 保存当前用例的执行结果
    saveExecutionResult() {
      const index = this.tableData.findIndex(item => item.id === this.currentCase.id)
      if (index !== -1) {
        this.tableData[index] = {
          ...this.tableData[index],
          is_passed: this.currentCase.is_passed,
          executor: this.currentCase.executor
        }
      }
    },
    // 查看上一条用例
    viewPreviousCase() {
      if (this.currentCaseIndex > 0) {
        this.saveExecutionResult() // 保存当前执行结果
        this.currentCaseIndex--
        this.currentCase = { 
          ...this.tableData[this.currentCaseIndex],
          executor: this.tableData[this.currentCaseIndex].executor || this.currentUser
        }
      }
    },
    // 查看下一条用例
    viewNextCase() {
      if (this.currentCaseIndex < this.tableData.length - 1) {
        this.saveExecutionResult() // 保存当前执行结果
        this.currentCaseIndex++
        this.currentCase = { 
          ...this.tableData[this.currentCaseIndex],
          executor: this.tableData[this.currentCaseIndex].executor || this.currentUser
        }
      }
    },
    // 从详情窗口打开编辑
    handleEditFromDetail() {
      this.editingCase = { ...this.currentCase }
      this.editDialogVisible = true
    },
    // 提交编辑
    submitEdit() {
      const index = this.tableData.findIndex(item => item.id === this.editingCase.id)
      if (index !== -1) {
        this.tableData[index] = { ...this.editingCase }
        // 如果详情窗口打开，同步更新详情窗口的数据
        if (this.caseDetailVisible && this.currentCase.id === this.editingCase.id) {
          this.currentCase = { ...this.editingCase }
        }
      }
      this.$message({
        type: 'success',
        message: '保存成功！'
      })
      this.editDialogVisible = false
    },
    // 添加新用例
    addNewCase() {
      this.newCase = {
        id: this.tableData.length + 1,
        project_name: '',
        version: '',
        case_name: '',
        priority: '一般',
        create_time: new Date().toLocaleString(),
        is_passed: false,
        preconditions: '',
        steps: '',
        expected_result: '',
        actual_result: '',
        executor: ''
      }
      this.addDialogVisible = true
    },
    // 提交新用例
    submitNewCase() {
      this.tableData.push({ ...this.newCase })
      this.$message({
        type: 'success',
        message: '添加成功！'
      })
      this.addDialogVisible = false
    },
    // 处理编辑时的优先级变更
    handleEditPriorityChange(command) {
      this.editingCase.priority = command
    },
    // 处理添加时的优先级变更
    handleAddPriorityChange(command) {
      this.newCase.priority = command
    },
    // 处理执行状态变更
    handleExecutionStatusChange(command) {
      this.currentCase.is_passed = command === 'true'
    },
  }
}
</script>

<style scoped>
.function-case-container {
  padding: 20px 0;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 30px;
}

.header-container h2 {
  margin: 0;
  color: #303133;
  font-size: 24px;
  font-weight: bold;
}

/* 移除表格所有边框和背景色 */
.transparent-table.el-table {
  background-color: transparent !important;
}

.transparent-table.el-table::before,
.transparent-table.el-table::after {
  display: none;
}

.transparent-table.el-table .el-table__header-wrapper,
.transparent-table.el-table .el-table__body-wrapper {
  background-color: transparent !important;
}

.transparent-table.el-table .el-table__header th.el-table__cell {
  background-color: transparent !important;
  border: none !important;
  font-weight: normal;
  color: #606266;
}

.transparent-table.el-table .el-table__body td.el-table__cell {
  background-color: transparent !important;
  border: none !important;
  padding: 8px 0;
}

.transparent-table.el-table .el-table__body tr:hover > td.el-table__cell {
  background-color: transparent !important;
}

.transparent-table.el-table .el-table__body tr.hover-row > td.el-table__cell {
  background-color: transparent !important;
}

.transparent-table.el-table .el-table__body tr.el-table__row--striped > td.el-table__cell {
  background-color: transparent !important;
}

/* 输入框和文本域样式统一 */
.el-input__inner,
.el-textarea__inner {
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.el-input:hover .el-input__inner,
.el-textarea:hover .el-textarea__inner {
  border: 1px dashed #DCDFE6 !important;
  padding: 0 15px !important;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border: 1px solid #409EFF !important;
  padding: 0 15px !important;
}

/* 确保表格中的输入框和文本域也遵循相同的样式 */
.transparent-table .el-input__inner,
.transparent-table .el-textarea__inner {
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.transparent-table .el-input:hover .el-input__inner,
.transparent-table .el-textarea:hover .el-textarea__inner {
  border: 1px dashed #DCDFE6 !important;
  padding: 0 15px !important;
}

.transparent-table .el-input__inner:focus,
.transparent-table .el-textarea__inner:focus {
  border: 1px solid #409EFF !important;
  padding: 0 15px !important;
}

/* 搜索区域样式 */
.search-section {
  margin-bottom: 20px;
  padding: 0 30px;
}

.search-bar-container {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.search-wrapper {
  flex: 1;
}

.search-bar-container :deep(.el-button) {
  margin-top: 4px;
}

.search-bar-container :deep(.el-input__inner) {
  height: 32px;
  line-height: 32px;
}

.search-bar-container :deep(.el-button) {
  height: 32px;
  line-height: 30px;
  padding: 0 20px;
}

/* 下拉菜单样式 */
.el-dropdown-menu {
  min-width: 60px !important;
  padding: 0 !important;
  border: none !important;
}

.el-dropdown-menu__item {
  padding: 0 !important;
  line-height: normal !important;
  text-align: center !important;
}

.el-dropdown-menu__item:hover {
  background-color: transparent !important;
}

.el-dropdown-menu__item .el-tag {
  border-radius: 0;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 优先级标签自定义样式 */
.priority-urgent {
  background-color: #ff0000 !important;
  border-color: #ff0000 !important;
  color: #ffffff !important;
}

.priority-suggestion {
  background-color: #ffffff !important;
  border-color: #dcdfe6 !important;
  color: #606266 !important;
}

/* 修改 el-tag 默认颜色 */
.el-tag--danger {
  background-color: #ffc0cb !important;
  border-color: #ffc0cb !important;
  color: #ffffff !important;
}

.el-tag--info {
  background-color: #c0c0c0 !important;
  border-color: #c0c0c0 !important;
  color: #ffffff !important;
}

.clickable-text {
  color: #409EFF;
  cursor: pointer;
}

.clickable-text:hover {
  text-decoration: underline;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 20px;
}

.dialog-footer .el-button {
  width: 100px;
}

/* 对话框基础样式 */
.case-detail-dialog {
  /deep/ .el-dialog {
    margin-top: 5vh !important;
    border-radius: 8px;
  }

  /deep/ .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #EBEEF5;
  }

  /deep/ .el-dialog__body {
    padding: 20px;
  }
}

/* 详情对话框特殊样式 */
.case-detail-dialog.view-mode {
  /deep/ .el-dialog__header {
    background-color: #f5f7fa;
  }

  /deep/ .el-dialog__title {
    color: #303133;
    font-weight: bold;
  }

  /deep/ .el-input.is-disabled .el-input__inner {
    background-color: transparent;
    border: none;
    color: #606266;
    cursor: default;
    padding-left: 0;
  }

  /deep/ .el-textarea.is-disabled .el-textarea__inner {
    background-color: transparent;
    border: none;
    color: #606266;
    cursor: default;
    resize: none;
    padding-left: 0;
  }
}

/* 编辑对话框特殊样式 */
.case-detail-dialog.edit-mode {
  /deep/ .el-dialog__header {
    background-color: #ecf5ff;
  }

  /deep/ .el-dialog__title {
    color: #409EFF;
    font-weight: bold;
  }

  /deep/ .el-input__inner,
  /deep/ .el-textarea__inner {
    border: 1px solid #DCDFE6;
    background-color: #fff;
    padding: 0 12px;
  }

  /deep/ .el-input__inner:hover,
  /deep/ .el-textarea__inner:hover {
    border-color: #c0c4cc;
  }

  /deep/ .el-input__inner:focus,
  /deep/ .el-textarea__inner:focus {
    border-color: #409EFF;
  }
}

/* 添加对话框特殊样式 */
.case-detail-dialog.add-mode {
  /deep/ .el-dialog__header {
    background-color: #f0f9eb;
  }

  /deep/ .el-dialog__title {
    color: #67c23a;
    font-weight: bold;
  }

  /deep/ .el-input__inner,
  /deep/ .el-textarea__inner {
    border: 1px solid #DCDFE6;
    background-color: #fff;
    padding: 0 12px;
  }

  /deep/ .el-input__inner:hover,
  /deep/ .el-textarea__inner:hover {
    border-color: #c0c4cc;
  }

  /deep/ .el-input__inner:focus,
  /deep/ .el-textarea__inner:focus {
    border-color: #67c23a;
  }
}

/* 表单样式调整 */
.case-detail-form {
  padding-right: 10px;
}

.case-detail-form :deep(.el-form-item) {
  margin-bottom: 18px;
  display: flex;
}

.case-detail-form :deep(.el-form-item__label) {
  padding: 0 12px 0 0;
  line-height: 32px;
  font-size: 14px;
  color: #606266;
  height: 32px;
  flex-shrink: 0;
  width: 100px;
  text-align: right;
  margin-top: 0;
}

.case-detail-form :deep(.el-form-item__content) {
  flex: 1;
  line-height: 32px;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  margin-top: 0;
}

/* 详情文本样式 */
.detail-text {
  line-height: 32px;
  color: #606266;
  white-space: pre-wrap;
  padding: 0;
  flex: 1;
}

/* 多行文本样式 */
.detail-text.multiline {
  line-height: 1.5;
  padding: 5px 0;
}

/* 文本域样式调整 */
.case-detail-form :deep(.el-textarea) {
  width: 100%;
}

.case-detail-form :deep(.el-textarea__inner) {
  padding: 5px 12px;
  line-height: 1.5;
  margin-top: 0;
}

/* 输入框样式调整 */
.case-detail-form :deep(.el-input) {
  width: 100%;
}

.case-detail-form :deep(.el-input__inner) {
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
}

/* 标签样式调整 */
.case-detail-form :deep(.el-tag) {
  height: 32px;
  line-height: 30px;
  padding: 0 12px;
  margin-top: 0;
}

/* 优先级下拉样式 */
.case-detail-form :deep(.el-dropdown) {
  height: 32px;
  line-height: 32px;
  margin-top: 0;
}

/* 修复表单项内容对齐 */
.case-detail-form :deep(.el-form-item__content > *) {
  margin: 0;
  width: 100%;
}

/* 修复多行文本域的对齐 */
.case-detail-form :deep(.el-form-item__content .el-textarea) {
  margin-top: 0;
}

/* 添加以下样式 */
.case-detail-form :deep(.el-input.is-disabled .el-input__inner) {
  background-color: transparent;
  border: none;
  color: #606266;
  cursor: default;
}

.case-detail-form :deep(.el-textarea.is-disabled .el-textarea__inner) {
  background-color: transparent;
  border: none;
  color: #606266;
  cursor: default;
  resize: none;
}

/* 执行结果区域样式 */
.execution-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.execution-result .el-dropdown {
  align-self: flex-start;
}
</style>
